<template>
  <div class="top-right-btn">
    <el-button-group>
      <el-button size="mini" icon="el-icon-search" @click="toggleSearch()" />
      <el-button size="mini" icon="el-icon-refresh" @click="refresh()" />
      <el-popover placement="bottom-end" width="150" trigger="click">

        <el-button slot="reference" size="mini" icon="el-icon-s-grid">
          <i class="fa fa-caret-down" aria-hidden="true" />
        </el-button>
        <el-checkbox
          v-model="allColumnsSelected"
          :indeterminate="allColumnsSelectedIndeterminate"
          @change="handleCheckAllChange"
        >
          全选
        </el-checkbox>
        <el-checkbox
          v-for="item in columns"
          :key="item.label"
          v-model="item.visible"
          @change="handleCheckedTableColumnsChange"
        >
          {{ item.label }}
        </el-checkbox>
      </el-popover>
    </el-button-group>
  </div>
</template>

<script>
export default {
  name: 'RightToolbar',
  props: {
    showSearch: {
      type: Boolean,
      default: true
    },
    tableRef: {
      type: Object,
      required: false
    },
    columns: {
      type: Array
    }
  },
  data() {
    return {
      allColumnsSelected: true,
      allColumnsSelectedIndeterminate: false

    }
  },
  watch: {
    /* tableRef() {
      this.columns = this.tableRef.columns.map(c =>
        c.label ?
          { label: c.label, visible: false } :
          { label: '', visible: false }
      )
    }*/
  },
  methods: {
    // 搜索
    toggleSearch() {
      this.$emit('update:showSearch', !this.showSearch)
    },
    // 刷新
    refresh() {
      this.$emit('queryTable')
    },
    // 右侧列表元素变化
    dataChange(data) {
      for (const item in this.columns) {
        const key = this.columns[item].key
        this.columns[item].visible = !data.includes(key)
      }
    },
    // 设置字段显示隐藏
    handleCheckedTableColumnsChange(data) {
      console.log(data)
      if (!data) {
        this.allColumnsSelected = false
      }
    },
    handleCheckAllChange(val) {
      if (this.allColumnsSelected) {
        this.columns.forEach(column => {
          if (!column.visible) column.visible = true
        })
      } else {
        this.columns.forEach(column => {
          if (column.visible) column.visible = false
        })
      }
    }

  }
}
</script>

<style scoped>
.top-right-btn {
  margin-left: auto;
}
</style>
